<!DOCTYPE html>
<html lang="zh">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="renderer" content="webkit" />

    <meta name="force-rendering" content="webkit" />
    <title></title>

</head>
<style>
    body {
        display: flex;
        justify-content: center;
        margin-top: 300px;
        align-items: center;
        flex-direction: column;
        overflow: hidden;
        background-color: #212121;
    }

    .heart {
        position: relative;
        cursor: pointer;
        will-change: transform;
        -webkit-tap-highlight-color: transparent;
    }

    .heart__wrapper {
        position: relative;
    }

    .heart__sun {
        position: absolute;
        top: -2.5rem;
        left: -0.5rem;
        z-index: -1;
        height: -1rem;
        width: 2rem;
        height: 2rem;
        background-color: transparent;
        border-radius: 50%;
        transition: background-color 0.5s ease;
    }

    .heart__shadow {
        position: absolute;
        bottom: 2rem;
        left: 1rem;
        z-index: -1;
        width: 3rem;
        height: 0.5rem;
        border-radius: 50%;
        box-shadow: 0 1.4rem 0 0 #bbb;
        transition: box-shadow 0.5s ease;
    }

    .heart__lines {
        position: absolute;
        top: -0.6rem;
        right: 0.2rem;
        width: 0.2rem;
        height: 0.8rem;
        border-radius: 0.5rem;
        background-color: #bbb;
        opacity: 0;
        transition: all 0.5s ease;
    }

    .heart__lines:before,
    .heart__lines:after {
        content: "";
        position: absolute;
        width: 0.2rem;
        height: 0.8rem;
        border-radius: 0.5rem;
        background-color: #bbb;
        transform-origin: 0.1rem 0.7rem;
        transition: height 0.5s ease;
    }

    .heart__lines:before {
        top: 0.25rem;
        left: 0.5rem;
        transform: rotate(30deg);
    }

    .heart__lines:after {
        top: 0.5rem;
        left: 1rem;
        transform: rotate(60deg);
    }

    .heart__icon path {
        position: relative;
    }

    .heart__eyes {
        position: absolute;
        top: 1.5rem;
        left: 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 3rem;
        height: 1rem;
        transition: all 0.1s ease;
    }

    .heart__eyes:before,
    .heart__eyes:after {
        content: "";
        width: 1rem;
        height: 0.2rem;
        background-color: #bbb;
        transition: all 0.1s ease;
    }

    .heart__mouth {
        position: absolute;
        top: 3rem;
        left: 2rem;
        width: 1rem;
        height: 0.2rem;
        background-color: #bbb;
        transition: all 0.2s ease;
    }

    .heart__arms {
        position: absolute;
        top: 2rem;
        left: 0.4rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 4.2rem;
        height: 1.5rem;
    }

    .heart__arms:before,
    .heart__arms:after {
        content: "";
        width: 0.2rem;
        height: 0;
        border-radius: 0 0 0.2rem 0.2rem;
        transform-origin: 0.1rem 0.2rem;
    }

    .heart__legs {
        position: absolute;
        top: 3.6rem;
        left: 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 2rem;
        height: 1rem;
    }

    .heart__legs:before,
    .heart__legs:after {
        content: "";
        width: 0.2rem;
        height: 0;
        border-radius: 0 0 0.2rem 0.2rem;
        transform-origin: 0.1rem 0rem;
    }

    .heart:not(.heart--active):hover {
        transform-origin: center bottom;
        animation: swing;
        animation-duration: 1s;
    }

    @keyframes swing {

        0%,
        100% {
            transform: rotate(0);
        }

        33% {
            transform: rotate(5deg);
        }

        66% {
            transform: rotate(-2deg);
        }
    }

    .heart__wrapper--active .heart__sun {
        background-color: #f5fccd;
    }

    .heart__wrapper--active .heart__shadow {
        animation: shadow;
        animation-duration: 1.5s;
    }

    @keyframes shadow {

        40%,
        85% {
            box-shadow: 0 1.4rem 0 -0.1rem #bbb;
        }
    }

    .heart--active {
        animation: leap;
        animation-duration: 1.5s;
        pointer-events: none;
    }

    @keyframes leap {

        40%,
        85% {
            transform: translate(0.2rem, -3rem) rotate(-25deg);
        }
    }

    .heart--active .heart__lines {
        animation: lines;
        animation-duration: 1.3s;
        animation-delay: 0.2s;
        background-color: #000038;
    }

    @keyframes lines {

        20%,
        80% {
            opacity: 0;
        }

        40%,
        60% {
            opacity: 1;
        }
    }

    .heart--active .heart__lines:before,
    .heart--active .heart__lines:after {
        background-color: #000038;
    }

    .heart--active .heart__icon path {
        fill: url(#RadialGradient);
        stroke: #ff7d66;
    }

    @supports (-webkit-hyphens:none) {
        .heart--active .heart__icon path {
            fill: #ff7d66;
        }
    }

    .heart--active .heart__eyes {
        width: 2.5rem;
        padding: 0 0.25rem;
    }

    .heart--active .heart__eyes:before,
    .heart--active .heart__eyes:after {
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background: radial-gradient(circle at 70% 30%, #fff 15%, #000038 15%, #000038);
    }

    .heart--active .heart__blush {
        position: absolute;
        top: 2.5rem;
        left: 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 2.5rem;
        height: 1rem;
    }

    .heart--active .heart__blush:before,
    .heart--active .heart__blush:after {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: #f58bc0;
    }

    .heart--active .heart__mouth {
        height: 0.5rem;
        border-radius: 0 0 2rem 2rem;
        background-color: #000038;
        overflow: hidden;
    }

    .heart--active .heart__mouth:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 20%;
        width: 60%;
        height: 50%;
        border-radius: 3rem 3rem 0 0;
        background-color: #f58bc0;
    }

    .heart--active .heart__arms:before,
    .heart--active .heart__arms:after {
        height: 1.5rem;
        background-color: #ff7d66;
        /* transition-propery: transform, height; */
        transition-duration: 0.1s;
    }

    .heart--active .heart__arms:before {
        animation: leftArm;
        animation-duration: 1.5s;
    }

    @keyframes leftArm {
        0% {
            transform: rotate(0deg);
        }

        40%,
        70% {
            transform: rotate(20deg);
        }

        100% {
            transform: rotate(-10deg);
        }
    }

    .heart--active .heart__arms:after {
        animation: rightArm;
        animation-duration: 1.5s;
    }

    @keyframes rightArm {
        0% {
            transform: rotate(0deg);
        }

        40%,
        80% {
            transform: rotate(-160deg);
        }

        100% {
            transform: rotate(-20deg);
        }
    }

    .heart--active .heart__legs:before,
    .heart--active .heart__legs:after {
        height: 1rem;
        background-color: #ff7d66;
        /* transition-propery: transform, height; */
        transition-duration: 0.6s;
    }

    .heart--active .heart__legs:before {
        animation: leftLeg;
        animation-duration: 1.5s;
    }

    @keyframes leftLeg {
        0% {
            transform: rotate(0deg);
        }

        40%,
        80% {
            transform: rotate(-10deg);
        }

        100% {
            transform: rotate(10deg);
        }
    }

    .heart--active .heart__legs:after {
        animation: leftRight;
        animation-duration: 1.5s;
    }

    @keyframes leftRight {
        0% {
            transform: rotate(0deg);
        }

        40%,
        80% {
            transform: rotate(30deg);
        }

        100% {
            transform: rotate(-10deg);
        }
    }
</style>


<body>
    <div id="heart-wrapper" class="heart__wrapper">
        <div class="heart__sun"></div>
        <div class="heart__shadow"></div>
        <div id="heart" class="heart">
            <div class="heart__lines"></div>
            <svg xmlns="http: //www.w3.org/2000/svg" class="heart__icon" width="5rem" height="5rem" viewBox="0 0 24 24"
                fill="none">
                <defs>
                    <radialGradient id="RadialGradient" cx="0.85" cy="0.1" r="0.15">
                        <stop offset="0%" stop-color="#ffaea0" />
                        <stop offset="100%" stop-color="#ffaea0" />
                        <stop offset="100%" stop-color="#ff7d66" />
                    </radialGradient>
                </defs>
                <title id="button-label">Like</title>
                <path aria-labelledby="button-label"
                    d="M2 9.1371C2 14 6.01943 16.5914 8.96173 18.9109C10 19.7294 11 20.5 12 20.5C13 20.5 14 19.7294 15.0383 18.9109C17.9806 16.5914 22 14 22 9.1371C22 4.27416 16.4998 0.825464 12 5.50063C7.50016 0.825464 2 4.27416 2 9.1371Z"
                    stroke="#BBB" stroke-width="1" fill="#FFF" />

            </svg>
            <div class="heart__eyes"></div>
            <div class="heart__blush"></div>
            <div class="heart__mouth"></div>
            <div class="heart__arms"></div>
            <div class="heart__legs"></div>

        </div>

    </div>
</body>

<script>
    const heartWrapper = document.getElementById("heart-wrapper"); const heart = document.getElementById("heart");
    heart.addEventListener("click", () => {
        heart.classList.add("heart--active"); heartWrapper.classList.add("heart__wrapper--active");
        setTimeout(() => {
            heart.classList.remove("heart--active"); heartWrapper.classList.remove("heart__wrapper--active");
        }, 1500);
    });
</script>

</html>